<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>drop</title>
        <style type='text/css'>
            .handle {
				width: 100px;
				height: 25px;
				border: dashed 1px red;
				cursor : pointer;
			}
            .dropout, .dropmove, .cancel {
                width: 200px;
				height: 50px;
				border: dashed 1px green;
				cursor : pointer;
                background-color: white;
            }
            #dropout {
                padding: 20px;
                border: solid 1px blue;
            }
            .over {
                background-color: yellow;
            }
        </style>
	</head>
	<body>
<div  id='demo-html'>
<h2>Drop Demo</h2>
<div class='handle'>Drag Me</div>
<h2>Dropout/Dropover</h2>
<div id='dropout'>
  <div class='dropout'></div>
  <div class='dropout'></div>
</div>
<a href="javascript://" id='undelegate'>undelegate</a>
<h2>Dropmove/Dropon</h2>
<div class='dropmove'></div>
<span>Drop Count <span class='count'>0</span></span>
</div>
		<script type='text/javascript' 
                src='../../../steal/steal.js?steal[app]=jquery/event/drop'>   
        </script>
		<script type='text/javascript' id='demo-source'>
//make drags
$('.handle').live("draginit", function(){})
			
//add dropout/dropover
$('#dropout')
  .delegate(".dropout","dropover", function(){ $(this).addClass('over') })
  .delegate(".dropout","dropout", function(){ $(this).removeClass('over') })
  .bind("dropover", function(){ $(this).addClass('over') })
  .bind("dropout", function(){ $(this).removeClass('over') });
	
//turn off dropout/dropover
$("#undelegate").click(function(){
    $('#dropout').undelegate(".dropout","dropover");
    $('#dropout').undelegate(".dropout","dropout");
})
	
//add dropmove/dropon
var count = 0
$('.dropmove')
  .bind('dropmove', function(){
    $('.count').text(count++)
  })
  .bind('dropon', function(){
    $(this).text("Dropped on!")
  })
        </script>
	</body>
</html>